<template>
  <ClientOnly>

    <el-card class="book-card">
      <div class="card-content">
        <div class="book-prop">
          <div class="prop" :span="8">书籍名称</div>
          <div class="val" :span="16">
            <el-tag>{{ `《${borrow?.book.name}》` }}</el-tag>
          </div>
        </div>

        <div class="book-prop">
          <div class="prop">出版社</div>
          <div class="val">
            <el-tag type="info"> {{ borrow?.book.publisher }}</el-tag>
          </div>
        </div>

        <div class="book-prop">
          <div class="prop">书籍编号</div>
          <div class="val">
            <el-tag type="info">{{ borrow?.book?.identityKey ?? "暂无编号" }}</el-tag>
          </div>
        </div>

        <div class="book-prop">
          <div class="prop">书籍位置</div>
          <div class="val">
            <el-tag>{{ getDepartmentName(borrow?.book?.departmentId) }}</el-tag>
          </div>
        </div>


        <div class="book-prop">
          <div class="prop">借阅人</div>
          <div class="val">
            <el-tag type="success">{{ borrow?.customerUser?.realname }}</el-tag>
          </div>
        </div>

        <div class="book-prop">
          <div class="prop">借阅人单位</div>
          <div class="val">
            <el-tag>{{ getDepartmentName(borrow?.customerUser?.departmentId) }}</el-tag>
          </div>
        </div>

        <div class="book-prop">
          <div class="prop">续借记录</div>
          <div class="val">
            <el-button @click="showReRentRecord(borrow)" :size="'small'">点击查看续借记录</el-button>
          </div>
        </div>

      </div>
      <div class="card-footer">
        <el-button type="danger" @click="handleReRentBook(borrow)">续借书籍</el-button>
        <el-button type="primary" @click="handleGiveBackBook(borrow)">归还书籍</el-button>
      </div>
    </el-card>
    <el-drawer v-model="drawer" :with-header="false">
      <el-table :data="reRentRecords">
        <el-table-column prop="createTime" label="续借日期" />
        <el-table-column label="续借人">
          <template #default="scope">
            <div>
              {{ props.borrow?.customerUser?.realname }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </ClientOnly>
</template>

<script setup lang="ts">
import DepartmentCache from "~/store/system/departmentCache";
import { useApi } from "~/composeables";

const api = useApi();

const props = defineProps<{
  borrow: any,
  reload: Function,
}>();

const drawer = ref(false);
const reRentRecords = ref<any>([]);

const getDepartmentName = (depId: any) => {
  let match = DepartmentCache.departments.filter(x => x.id === depId);
  if (match?.length > 0) {
    return match[0]?.name;
  } else {
    return "/";
  }
};

const handleGiveBackBook = (borrow: any) => {
  if (borrow.status === 2) {
    ElMessageBox.alert("这本书已经归还！");
  } else {
    ElMessageBox.confirm("确定归还这本书吗？", "确定吗？", {
      cancelButtonText: "暂时不用",
      confirmButtonText: "确定归还"
    })
      .then(() => {
        api.rentRecordApi.giveBack(borrow.id)
          .then(res => {
            if (res.success) {
              if (props.reload) {
                ElMessageBox.alert("书籍已归还，书籍状态回滚为可出借状态！")
                  .then(() => {
                    props.reload();
                  });
              }
            }
          });
      })
      .catch(err => {
        ElMessageBox.alert("归还失败，请联系管理员！");
      });
  }
};

const handleReRentBook = (borrow: any) => {
  if (borrow.status === 2) {
    ElMessageBox.alert("这本书已经归还！");
  } else {
    ElMessageBox.confirm("确定续借这本书吗？", "确定吗？", {
      cancelButtonText: "暂时不用",
      confirmButtonText: "确定续借"
    })
      .then(() => {
        api.rentRecordApi.reRent(borrow.id)
          .then(res => {
            if (res.success) {
              if (props.reload) {
                ElMessageBox.alert("书籍续借记录已登记！")
                  .then(() => {
                    props.reload();
                  });
              }
            }else{
              ElMessageBox.alert("续借失败，请联系管理员！");
            }
          });
      })
      .catch(err => {
        ElMessage.info("操作已取消");
      });
  }
};


const showReRentRecord = (borrow: any) => {
  api.rentRecordApi.loadReRentRecords(borrow.id)
    .then(res => {
      if (res.success) {
        reRentRecords.value = res.data?.pageData;
        drawer.value = true;
      } else {
        reRentRecords.value = [];
      }
    })
    .catch(err => {
      ElMessage.error("加载续借记录失败");
    });
};

</script>

<style scoped>
.book-card {
  width: 345px;
  height: 290px;
  margin: 8px;
  border-left: 3px orange solid;
}

.card-content {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.book-prop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}

.prop {
  display: flex;
  justify-content: flex-start;
  width: 100px;
}

.val {
  font-size: 0.9em;
  color: #666;
}

.card-footer {
  height: 45px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
</style>